<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/LargeScreen.css">
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/module/gcjsy/js/echarts.min.js"></script>
</head>
<body>

<div class="main">
  <div class="main-header clear">
    <div class="main-logo">
      <div class="mian-logo-card">
        <img src="img/logo.png" alt="">
      </div>
      <div class="main-logo-text">
        <h3>合肥市数据监控看板</h3>
        <p>He Fei Data Monitoring Billboard</p>
      </div>
    </div>
    <div class="main-weather">
      <div class="weather-icon">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
        <img src="img/sun.png" alt="">
      </div>

      <div class="weather-temperature" id="weatherData">
        <div>
          <p>20℃~29℃</p>
          <span>1 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>2 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>3 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>4 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>5 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>6 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>7 晴</span>
        </div>
        <div>
          <p>20℃~29℃</p>
          <span>1 晴</span>
        </div>
      </div>
      <div class="weather-date">
        <p id="nowTime"></p>
        <span id="nowData"></span>
      </div>
    </div>
  </div>
  <div class="main-left">
    <section>
      <h3 class="main-title">
        <span>总体数据概览</span>
      </h3>
      <ul class="total-data clear">
        <li>
          <p class="data-title">运输企业</p>
          <p class="data-number">150<span>家</span></p>
          <img src="img/data1.png" alt="">
        </li>
        <li>
          <p class="data-title">运输车辆</p>
          <p class="data-number">5000<span>俩</span></p>
          <img src="img/data2.png" alt="">
        </li>
        <li>
          <p class="data-title">建筑工地</p>
          <p class="data-number">150<span>个</span></p>
          <img src="img/data3.png" alt="">
        </li>
        <li>
          <p class="data-title">消纳场</p>
          <p class="data-number">5000<span>个</span></p>
          <img src="img/data4.png" alt="">
        </li>
      </ul>
    </section>
    <section class="violations">
      <h3 class="main-title">
        <span>违规报警趋势（近七日）</span>
      </h3>
      <div class="violation-trend" id="charts1"></div>
    </section>
    <section>
      <h3 class="main-title">
        <span>违规报警类型（近七日）</span>
      </h3>
      <div class="violation-type" id="charts2">

      </div>
      <div class="v-type-box">
        <div class="v-type-item"><label>设备离线（13条）</label><span>26.9%</span></div>
        <div class="v-type-item"><label>车辆超速（121条）</label><span>24%</span></div>
        <div class="v-type-item"><label>路线偏离（12条）</label><span>21.2%</span></div>
        <div class="v-type-item"><label>车辆违规（1条）</label><span>19.5%</span></div>
        <div class="v-type-item"><label>企业违规（3条）</label><span>8.3%</span></div>
      </div>
    </section>
  </div>
  <div class="main-right">
    <div class="map" id="mapBox" style="width: 100%;height: 100%">


    </div>
    <div class="situation clear">
      <h3 class="main-title">
        <span>今日违规报警情况</span>
      </h3>
      <div class="situation-left clear">
        <div class="pie" id="charts3"></div>
        <ul class="total-data clear">
            <li>
              <p class="data-title">运输企业</p>
              <p class="data-number">150<span>家</span></p>
              <img src="img/data1.png" alt="">
            </li>
            <li>
              <p class="data-title">运输车辆</p>
              <p class="data-number">5000<span>俩</span></p>
              <img src="img/data2.png" alt="">
            </li>
          </ul>
      </div>
      <div class="situation-right" id="charts4">

      </div>

    </div>
  </div>
</div>



<script src="js/template.js"></script>
<script src="js/LargeScreen.js"></script>

    <script src="js/areaJson.js"></script>
    <script src="js/map.js"></script>

<script type="text/html" id="weatherTpl">
  {{each obj as s}}
  <div>
    <p>{{s.low}}~{{s.high}}</p>
    <span>{{s.date}} {{s.type}}</span>
  </div>
  {{/each}}
</script>
<script>
  $(function () {
    showLeftTime();
    getWeather();

  });

  function weatherEvent() {
    var index=0;
    setInterval(function(){
      index++;
      if(index<=4){
        scrollHeight=-48*index;
        $(".weather-temperature>div").each(function () {
          $(this).animate({
            "top":scrollHeight+"px"
          },1000)

        });
        $(".weather-icon>img").each(function () {
          $(this).animate({
            "top":scrollHeight+"px"
          },1000)
        })
      }else{
        $(".weather-temperature>div").each(function () {
          $(this).css("top","0px");
        });
        $(".weather-icon>img").each(function () {
          $(this).css("top","0px");
        });
        index=0;
      }

    },5000);

  }
  function getWeather() {
/*星期一：MON
* 星期二:TUE
*星期三：WED
* 星期四:THU
* 星期五:FRI
* 星期六：SAT
*星期日：SUN*/


    $.ajax({
      method: "get",
      url: "http://wthrcdn.etouch.cn/weather_mini?city=" + encodeURIComponent('合肥'),
      success: function (result) {
        var obj = JSON.parse(result);
        var smg = obj.data.forecast;

        var info=[];
        for (var i=0;i<smg.length;i++) {

          var s = smg[i];
          var date1 = s.date;
          var d = date1.substring(date1.length-1,date1.length);
          var date = '';
          if(d=='一'){
            date='MON'
          }else if(d=='二'){
            date='TUE'
          }else if(d=='三'){
            date='WED'
          }else if(d=='四'){
            date='THU'
          }else if(d=='五'){
            date='FRI'
          }else if(d=='六'){
            date='SAT'
          }else if(d=='日'){
            date='SUN'
          }
          var high = s.high.substring(3,s.high.length);
          var low = s.low.substring(3,s.low.length);
          var type = s.type;

          info.push({
            'date':date,
            'high':high,
            'low':low,
            'type':type
          });
        }

        $("#weatherData").html(template("weatherTpl", {'obj':info}));
        weatherEvent();
      }
    });
  }

</script>
</body>
</html>
